import * as YvanUI from "yvan-ui-wotu";

const _ = YvanUI.lodash
const React = YvanUI.React

interface Ref {
}

export default class Protal extends YvanUI.Scope<void, Ref> {

    result = this.$$({
        node: {
            department: '',
            disease: '',
            group: '',
            medicine: '',
            symptom: '',
        },
        relation: {
            include: '',
            induce: '',
            search: '',
            treat: '',
        },
        bk: {
            disease: '',
            medicine: '',
        },
        align: {
            symptom: '',
            disease: '',
            medicine: '',
        }
    })

    onRender() {
        const data1 = [
            {
                "label": "node", cb: (res) => {
                    const {department, disease, group, medicine, symptom} = res.result
                    YvanUI.transaction(() => {
                        this.result.node.department = department
                        this.result.node.disease = disease
                        this.result.node.group = group
                        this.result.node.medicine = medicine
                        this.result.node.symptom = symptom
                    })
                }
            },
            {
                "label": "relation", cb: (res) => {
                    const {include, induce, search, treat} = res.result
                    YvanUI.transaction(() => {
                        this.result.relation.include = include
                        this.result.relation.induce = induce
                        this.result.relation.search = search
                        this.result.relation.treat = treat
                    })
                }
            },
        ]

        const data2 = [
            {"label": "node", "name": "disease", cb: (res) => this.result.bk.disease = res.result},
            {"label": "node", "name": "medicine", cb: (res) => this.result.bk.medicine = res.result},

            {"label": "align", "name": "symptom", cb: (res) => this.result.align.symptom = res.result},
            {"label": "align", "name": "disease", cb: (res) => this.result.align.disease = res.result},
            {"label": "align", "name": "medicine", cb: (res) => this.result.align.medicine = res.result},
        ]

        data1.forEach((data) => {
            YvanUI.ajax.func({
                url: '/kg/search/graph/detail/data/count',
                method: 'post-json',
                data: data
            }).then(data.cb)
        })

        data2.forEach((data) => {
            YvanUI.ajax.func({
                url: '/kg/search/data/count',
                method: 'post-json',
                data: data
            }).then(data.cb)
        })
    }

    vjson = this.$$({
        view: 'page',
        title: '首页',
        items: [
            {
                view: 'row',
                gutter: 16,
                items: [
                    {
                        view: 'col',
                        span: 6,
                        items: [
                            {
                                view: 'card',
                                title: '核心数据',
                                size: 'small',
                                items: [
                                    {
                                        view: 'statistic',
                                        title: '科室',
                                        loading: {$watch: () => !this.result.node.department},
                                        value: {$watch: () => this.result.node.department},
                                    },
                                    {view: 'divider'},
                                    {
                                        view: 'statistic',
                                        title: '疾病',
                                        loading: {$watch: () => !this.result.node.disease},
                                        value: {$watch: () => this.result.node.disease},
                                    },
                                    {view: 'divider'},
                                    {
                                        view: 'statistic',
                                        title: '分组',
                                        loading: {$watch: () => !this.result.node.group},
                                        value: {$watch: () => this.result.node.group},
                                    },
                                    {view: 'divider'},
                                    {
                                        view: 'statistic',
                                        title: '药品',
                                        loading: {$watch: () => !this.result.node.medicine},
                                        value: {$watch: () => this.result.node.medicine},
                                    },
                                    {view: 'divider'},
                                    {
                                        view: 'statistic',
                                        title: '症状',
                                        loading: {$watch: () => !this.result.node.symptom},
                                        value: {$watch: () => this.result.node.symptom},
                                    },
                                ]
                            },
                        ]
                    },
                    {
                        view: 'col',
                        span: 6,
                        items: [{
                            view: 'card',
                            title: '关系数据',
                            size: 'small',
                            items: [
                                {
                                    view: 'statistic',
                                    title: '包含',
                                    loading: {$watch: () => !this.result.relation.include},
                                    value: {$watch: () => this.result.relation.include},
                                },
                                {view: 'divider'},
                                {
                                    view: 'statistic',
                                    title: '诱发',
                                    loading: {$watch: () => !this.result.relation.induce},
                                    value: {$watch: () => this.result.relation.induce},
                                },
                                {view: 'divider'},
                                {
                                    view: 'statistic',
                                    title: '查找',
                                    loading: {$watch: () => !this.result.relation.search},
                                    value: {$watch: () => this.result.relation.search},
                                },
                                {view: 'divider'},
                                {
                                    view: 'statistic',
                                    title: '治疗',
                                    loading: {$watch: () => !this.result.relation.treat},
                                    value: {$watch: () => this.result.relation.treat},
                                },
                            ]
                        }]
                    },
                    {
                        view: 'col',
                        span: 6,
                        items: [{
                            view: 'card',
                            title: '百科知识',
                            size: 'small',
                            items: [
                                {
                                    view: 'statistic',
                                    title: '疾病',
                                    loading: {$watch: () => !this.result.bk.disease},
                                    value: {$watch: () => this.result.bk.disease},
                                },
                                {view: 'divider'},
                                {
                                    view: 'statistic',
                                    title: '药品',
                                    loading: {$watch: () => !this.result.bk.medicine},
                                    value: {$watch: () => this.result.bk.medicine},
                                },
                            ]
                        }]
                    },
                    {
                        view: 'col',
                        span: 6,
                        items: [{
                            view: 'card',
                            title: '实体对齐',
                            size: 'small',
                            items: [
                                {
                                    view: 'statistic',
                                    title: '症状',
                                    loading: {$watch: () => !this.result.align.symptom},
                                    value: {$watch: () => this.result.align.symptom},
                                },
                                {view: 'divider'},
                                {
                                    view: 'statistic',
                                    title: '疾病',
                                    loading: {$watch: () => !this.result.align.disease},
                                    value: {$watch: () => this.result.align.disease},
                                },
                                {view: 'divider'},
                                {
                                    view: 'statistic',
                                    title: '药品',
                                    loading: {$watch: () => !this.result.align.medicine},
                                    value: {$watch: () => this.result.align.medicine},
                                },
                            ]
                        }]
                    }
                ]
            }
        ]
    })
}